import React, { memo, useState, useRef } from "react";
import { shallowEqual, useSelector } from "react-redux";
import { PublishWrapper, UploadButton, UploadImage } from "./style";
// antd样式
import { Input, Divider, Button, Modal } from "antd";
import { ExclamationCircleOutlined, CameraOutlined } from "@ant-design/icons";

import axios from "axios";

const { TextArea } = Input;

export default memo(function Publish() {
  // 图片
  const [imgUrl, setImgUrl] = useState("");

  //const [testImg, setTestImg] = useState("");
  const [picurl, setPicUrl] = useState("");

  // 标题
  const [theme, setTheme] = useState("");
  // 内容
  const [detail, setDetail] = useState("");

  const inputRef = useRef();

  // 拿到用户id
  const { userInfo } = useSelector(
    (state) => ({
      userInfo: state.getIn(["user", "userInfo"]),
    }),
    shallowEqual
  );

  // 处理上传图片
  const handleUpload = () => {
    const file = inputRef.current.files[0];

    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      setImgUrl(reader.result);
      let formData = new FormData();
      formData.append("file", file);
      axios
        .post("http://192.168.232.202:8001/eduoss/fileoss", formData, {
          headers: {
            "Content-Type":
              "multipart/form-data; boundary=----WebKitFormBoundaryUPpZmJyZ2YUuTb55",
          },
        })
        .then((res) => {
          console.log(res);
          setPicUrl(res.data);
        });
    };
  };

  // 标题
  const handleThemeInput = (e) => {
    setTheme(e.target.value);
  };

  // 内容
  const handleDeatilInput = (e) => {
    setDetail(e.target.value);
  };

  // 发布笔记
  const handleSubmit = () => {
    if (theme === "" || detail === "" || imgUrl === "") {
      Modal.error({
        content: "请填写完整哟！",
      });

      return;
    } else {
      axios({
        method: "POST",
        url: "http://192.168.232.202:8001/pomelo/note/addNote",
        data: {
          theme: theme,
          userId: userInfo.userId,
          picurl: picurl,
          detail: detail,
        },
      }).then((res) => {
        console.log(res);
      });

      console.log("发布成功！");
    }
  };

  // 验证图片是否上传完毕
  const imgUrlResult = (imgUrl && imgUrl) || "";

  //获取图片 此方法无用
  /*  const getImg = () => {
    axios({
      url: "http://192.168.232.202:8001/eduservice/edu-chapter/getAllNote",
    }).then((res) => {
      console.log(res.data);
    });

    return;

    axios({
      method: "GET",
      url: "http://localhost:5000/api/test",
    }).then((res) => {
      console.log(res);
      setTestImg("data:image/png;base64," + res.data.message);
    });
  }; */

  return (
    <PublishWrapper>
      <div className="head">
        <span>写笔记</span>
        <i>
          <ExclamationCircleOutlined />
        </i>
      </div>
      {/*   {testImg && <img alt="" src={testImg} />} */}
      {/*   <button onClick={getImg}>获取数据库中的图片信息</button> */}
      <div className="body">
        <Input
          value={theme}
          onChange={handleThemeInput}
          size="large"
          allowClear
          bordered={false}
          placeholder="填写标题会有更多赞哦~"
        />
        <Divider />
        <TextArea
          value={detail}
          onChange={handleDeatilInput}
          allowClear
          rows={6}
          placeholder="添加正文"
          bordered={false}
        />
        <Divider />
      </div>
      <UploadImage>
        <input
          type="file"
          ref={inputRef}
          onChange={handleUpload}
          accept="image/*"
          hidden
        />
        {imgUrlResult && <img src={imgUrl} alt="" className="img-result" />}
        <UploadButton onClick={(e) => inputRef.current.click()}>
          <CameraOutlined style={{ fontSize: 30 }} />
          照片
        </UploadButton>
      </UploadImage>
      <div className="footer">
        <Button
          shape="round"
          danger
          type="primary"
          block
          onClick={handleSubmit}
        >
          发布笔记
        </Button>
      </div>
    </PublishWrapper>
  );
});
